// 侧栏
var aside = {

    // 主体
    main: ".placebox",
    // 列表
    container: ".placebox-list",
    // 开关
    switch: "#sbarSwitch",
    // 显隐状态
    show: true,

    // 初始化列表
    init: function(data){
        var self = this;
        $(self.container).empty();
        $.each(data,function(index,object){
            var typeName = 'building';
            if(object.type == 1) typeName = 'camera';
            $(self.container).append(
                '<li class="'+ typeName +'-li animate">'+
                '<h3>'+ object.name +'</h3>'+
                '<span>'+ object.cameralist.length +' 个监控</span>'+
                '</li>'
            );
        });
        this.bindClick();
        this.bindSwitch();
    },

    // 绑定点击
    bindClick: function(){
        $(this.container).on('click','li',function(){
            var index = $(this).index();
            mapbox.markerClick(mapbox.markerList[index]);
        });
    },

    // 绑定伸缩
    bindSwitch: function(){
        var self = this;
        $(this.switch).bind('click',function(){
            if (self.show) {
                $(self.main).css("left","-280px");
                $(this).text(">").attr("title","展开列表");
                $(mapbox.container).css("left","0");
                self.show = false;
            }
            else {
                $(self.main).css("left","0");
                $(this).text("<").attr("title","隐藏列表");
                $(mapbox.container).css("left","280px");
                self.show = true;
            }
        });
    }
};


// 地图主体
var mapbox = {

    // 容器
    container: "#container",
    // 标记物组
    markerList: [],

    // 地图初始化
    amapInit: function(){
        // 创建图层：defaultLayer默认图层，traffic路况图层，Satellite卫星图
        this.defaultLayer = new AMap.TileLayer();
        this.trafficLayer = new AMap.TileLayer.Traffic();
        this.satelliteLayer = new AMap.TileLayer.Satellite();
        // 创建地图
        this.map = new AMap.Map('container', {
            resizeEnable: true,
            zoom:12,
            center: [113.297524, 22.033683],
            layers: [
                this.defaultLayer,
                this.trafficLayer,
                this.satelliteLayer
            ],
            mapStyle: 'amap://styles/normal'
        });
        // 默认隐藏路况、卫星图层
        this.trafficLayer.hide();
        this.satelliteLayer.hide();
        // 引用控件
        AMap.plugin(['AMap.ToolBar','AMap.Scale','AMap.OverView'],function(){
            this.map.addControl(new AMap.ToolBar());
            this.map.addControl(new AMap.Scale());
            this.map.addControl(new AMap.OverView({isOpen:true}));
        });
        // 创建自定义信息窗体
        this.infoWindow = new AMap.InfoWindow({
            isCustom: true,
            offset: new AMap.Pixel(0, -30)
        });
    },

    // 地图信息初始化
    init: function(data){
        var self = this;
        $.each(data,function(index,object){

            var iconUrl = 'image/building_icon.png',
                typeHtml = '公共设施';
            if(object.type == 1) {
                iconUrl = 'image/camera_icon.png';
                typeHtml = '卡口';
            }

            // 创建视频区
            var cameraHtml = '';
            if(object.cameralist.length>0){
                if(object.cameralist.length>1) cameraHtml = '<div class="camera-box">';
                else cameraHtml = '<div class="camera-box" style="width:auto">';
                $.each(object.cameralist,function(i,e){
                    cameraHtml += '<div class="camera-one"><div id="flashContent'+ i +'"></div></div>'
                });
                cameraHtml += '</div>';    
            }

            // 创建标记物
            var marker = new AMap.Marker({
                icon : iconUrl,
                position: [object.x , object.y],
                offset: new AMap.Pixel(-14, -14),
                map: self.map
            });
            marker.content='<div class="infoWindow">'+
                            '<div class="title title'+object.type+'">'+
                            '<h2>'+ typeHtml +'信息</h2>'+
                            '<button class="closeInfoWindow">X</button>'+
                            '</div>'+
                            '<div class="content">'+
                            '<p>'+
                            '<span>'+ object.name +'</span>'+
                            object.info +
                            '</p>'+
                            cameraHtml +
                            '</div>'+
                            '</div>';
            marker.cameraUrl = object.cameralist;
            marker.on('click',function(e){
                self.markerClick(e);
            });

            self.markerList.push(marker);
        });
        this.controlTrafficLayer();
        this.controlSatelliteLayer();
    },

    // 标记物点击事件
    markerClick: function(e){
        var item = e.target ? e.target : e;
        // 更新信息窗体内容并打开窗体
        this.infoWindow.setContent(item.content);
        this.infoWindow.open(this.map, item.getPosition());
        this.closeInfoWindow();
        // 加载视频
        var cameraUrl = item.cameraUrl;
        if(cameraUrl == undefined) return false;
        $.each(cameraUrl,function(index,object){
            videoPlayer(object,"flashContent"+index);
        })
    },

    // 绑定关闭信息窗体
    closeInfoWindow: function(){
        var self = this;
        $(this.container).on("click",".closeInfoWindow",function(){
            self.map.clearInfoWindow();
        });
    },

    // 控制路况层    
    controlTrafficLayer: function(){
        var self = this;
        $("#traffic").click(function(){
            if ($(this).hasClass("active")) {
                self.trafficLayer.hide();
                $(this).removeClass("active");
            }
            else {
                self.trafficLayer.show();
                $(this).addClass("active");
            }
        });
    },

    // 控制卫星层    
    controlSatelliteLayer: function(){
        var self = this;
        $("#satellite").click(function(){
            if ($(this).hasClass("active")) {
                self.satelliteLayer.hide();
                $(this).removeClass("active");
            }
            else {
                self.satelliteLayer.show();
                $(this).addClass("active");
            }
        });
    }

}


// 初始化侧栏
aside.init(placeList);
mapbox.amapInit();
mapbox.init(placeList);


/**
 * 视频播放
 * @param videoUrl   视频路径（支持 rtmp、mp4）
 * @param container  视频播放容器的id
 */
function videoPlayer(videoUrl,container) {
    var queryParameters = new Array();
    queryParameters['source'] = videoUrl;
    //flashvarsObj 指定你的flashvars
    var soFlashVars = {
        src: queryParameters['source'],
        streamType: "live",
        autoPlay: "true",
        controlBarAutoHide: "true",
        controlBarPosition: "bottom",
        bufferTime: 0.8
    };
    // Flash Player版本
    var swfVersionStr = "11.1"; //10.3.0
    var xiSwfUrlStr = "js/videoplayer/playerProductInstall.swf";
    // parObj 嵌套元素属性
    var params = {
        quality: "high",
        bgcolor: "#000000",
        allowscriptaccess: "sameDomain",
        allowfullscreen: true
    };
    //attObj 指定object的属性
    var attributes = {
        id: "StrobeMediaPlayback",
        name: "StrobeMediaPlayback",
        align: "middle",
        wmode: "opaque"
    };
    swfobject.embedSWF("js/videoplayer/StrobeMediaPlayback.swf", container, "100%", "100%", swfVersionStr, xiSwfUrlStr, soFlashVars, params, attributes);
}